@import './variables';
@import './colors';
@import './ellipsis';

.outline-navigator {
  position: relative;
  z-index: 1;
  margin: 0;
  width: var(--outline-navigator-width);
  overflow: auto;

  &-parent {
    transition: 0.3s ease-in-out;
  }

  &__title {
    margin: 0 16px;
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    border-bottom: 1px solid @primary_border_color;
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
  }

  &__main {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
  }

  &__list,
  &__subject,
  &__item {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
  }

  &__list {
    padding: 0.5em 0;
  }

  &__subject {
    padding-left: 1em;
  }

  &__item {
    margin: 0;
    line-height: 30px;
    font-size: 13px;
    overflow: hidden;
  }

  &__placeholder {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: @hover_bg_color;
    border-left: 2px solid @success_color;
    transition-duration: 0.2s;
    box-sizing: border-box;
    overflow: hidden;
  }

  &__anchor {
    .ellipsis(1);
    display: block;
    padding: 0 1.5em;

    &:link,
    &:visited,
    &:hover {
      text-decoration: none;
      color: @secondary_text_color;
    }

    &:hover {
      color: @success_color;
    }
  }

  &__code {
    padding-right: 0.5em;
  }

  &_highlight {
    &.outline-navigator__anchor {
      &:link,
      &:visited,
      &:hover {
        color: @success_color;
        font-weight: bold;
      }
    }
  }

  &_sticky,
  &_fixed {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    z-index: var(--outline-zIndex);
    top: 0;
    overflow: hidden;

    .outline-navigator {
      &__title,
      &__main {
        box-sizing: border-box;
      }

      &__title {
        flex-shrink: 0;
      }

      &__main {
        flex: 1;
        overflow: auto;
      }
    }
  }

  &_sticky {
    position: sticky;
    max-height: var(--outline-sticky-height);
  }

  &_fixed {
    position: fixed;
    max-height: 100%;
  }

  &_hidden {
    display: none;
  }

  &_folded {
    width: 0;
    overflow: hidden;
  }
}
